<template>
  <div class="bgc-default pad-20">
    <h2>基本信息</h2>
    <div class="bg-color-white">
      <el-form class="pad-t-20 pad-b-20" label-width="230px" :model="enterpriseConfig" :rules="rules" ref="enterpriseConfig">
        <el-row>
          <el-col :span="24">
            <el-form-item label="企业名称：" prop="enterpriseName">
              {{ enterprise.enterpriseName}}
            </el-form-item>
            <el-form-item label="绑定手机：" prop="phone">
              {{ enterprise.phone}}
            </el-form-item>
            <el-form-item label="寄件人：" prop="sender">
              <div><el-input style="width: 459px;" v-model="enterpriseConfig.sender"></el-input></div>
            </el-form-item>
            <el-form-item label="寄件人电话：" prop="senderPhone">
              <div><el-input style="width: 459px;" v-model="enterpriseConfig.senderPhone"></el-input></div>
            </el-form-item>
            <el-form-item label="退货地址：" prop="refundAddress">
              <div>
                <el-select class="mar-r-3 width-150" v-model="enterpriseConfig.refundProvinceCode" placeholder="请选择省份" @change="changeCity(enterpriseConfig.refundProvinceCode)">
                  <el-option v-for="item in provinceList" :key="item.areaCode" :label="item.areaName" :value="item.areaCode">
                  </el-option>
                </el-select>
                <el-select class="mar-r-3 width-150" v-model="enterpriseConfig.refundCityCode" placeholder="请选择城市" @change="changeDistrict(enterpriseConfig.refundCityCode)">
                  <el-option v-for="item in cityList" :key="item.areaCode" :label="item.areaName" :value="item.areaCode">
                  </el-option>
                </el-select>
                <el-select class="mar-r-3 width-150" v-model="enterpriseConfig.refundDistrictCode" placeholder="请选择区县">
                  <el-option v-for="item in districtList" :key="item.areaCode" :label="item.areaName" :value="item.areaCode">
                  </el-option>
                </el-select>
              </div>
              <div class="mar-t-10"><el-input style="width: 459px;" v-model="enterpriseConfig.refundAddress"></el-input></div>
            </el-form-item>
            <el-form-item label="退货收件人：" prop="refundReceiver">
              <div><el-input style="width: 459px;" v-model="enterpriseConfig.refundReceiver"></el-input></div>
            </el-form-item>
            <el-form-item label="退货联系电话：" prop="refundReceiverPhone">
              <div><el-input style="width: 459px;" v-model="enterpriseConfig.refundReceiverPhone"></el-input></div>
            </el-form-item>
            <el-form-item label="">
              <el-button class="save-btn" type="primary" @click="saveEnterpriseConfig">保存</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <h2 style="margin-top: 78px;">账户资料</h2>
    <div class="bg-color-white">
      <el-form class="pad-t-20 pad-b-20" label-width="230px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="开户名称：">
              {{ enterprise.bankAccountName }}
            </el-form-item>
            <el-form-item label="开户银行：">
              {{ enterprise.bankName}}
            </el-form-item>
            <el-form-item label="开户银行账号：">
              {{ enterprise.bankCardNo }}
            </el-form-item>
            <el-form-item label="营业执照：">
              <img style="width: 129px;height: 179px;" :src="enterprise.businessLicenseUrl" v-if="enterprise.businessLicenseUrl">
            </el-form-item>
            <el-form-item label="开户许可证：">
              <img style="width: 191px;height: 116px;" :src="enterprise.openingPermitUrl" v-if="enterprise.openingPermitUrl">
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="bottom-bar">
      <el-button @click="$router.go(-1)">返回</el-button>
    </div>
  </div>
</template>

<script>
  import { getEnterprise } from '@/api/user/enterprise'
  import { getByEnterpriseId, saveEnterpriseConfig } from '@/api/user/enterprise'
  import { listProvince, listCity, listDistrict } from '@/api/area/area'

  export default {
    data() {
      return {
        enterprise: {},
        enterpriseConfig: {
          refundProvinceCode: '',
          refundCityCode: '',
          refundDistrictCode: '',
          refundAddress: '',
          refundReceiver: '',
          refundReceiverPhone: '',
          sender: '',
          senderPhone: ''
        },
        provinceList: [],
        cityList: [],
        districtList: [],
        rules: {
          refundAddress: [
            { required: true, message: '请填写退货地址', trigger: 'blur' }
          ],
          refundReceiver: [
            { required: true, message: '请填写退货收件人', trigger: 'blur' }
          ],
          refundReceiverPhone: [
            { required: true, message: '请填写退货联系电话', trigger: 'blur' }
          ]
        }
      }
    },
    // 初始化页面
    created() {
      listProvince().then(response => {
        this.provinceList = response.data
      })
      this.initDataInfo()
    },
    methods: {
      initDataInfo() {
        getEnterprise(this.getEnterpriseId()).then(response => {
          if (response.isError) return
          this.enterprise = response.data
        })
        getByEnterpriseId(this.getEnterpriseId()).then(response => {
          if (response.isError) return
          Object.assign(this.enterpriseConfig, response.data)
          this.changeCity(this.enterpriseConfig.refundProvinceCode, this.enterpriseConfig.refundCityCode, this.enterpriseConfig.refundDistrictCode)
        })
      },
      changeCity(provinceCode, cityCode, districtCode) {
        if (provinceCode) {
          listCity(provinceCode).then(response => {
            this.cityList = response.data
            if (cityCode) {
              this.enterpriseConfig.refundCityCode = cityCode
            } else {
              this.enterpriseConfig.refundCityCode = ''
            }
            this.changeDistrict(cityCode, districtCode)
          })
        }
      },
      changeDistrict(cityCode, districtCode) {
        if (cityCode) {
          listDistrict(cityCode).then(response => {
            this.districtList = response.data
          })
        }
        if (districtCode) {
          this.enterpriseConfig.refundDistrictCode = districtCode
        } else {
          this.enterpriseConfig.refundDistrictCode = ''
        }
      },
      saveEnterpriseConfig() {
        if (!this.enterpriseConfig.refundProvinceCode) {
          this.$message.error('请选择省份!')
          return
        }
        if (!this.enterpriseConfig.refundCityCode) {
          this.$message.error('请选择城市!')
          return
        }
        if (!this.enterpriseConfig.refundDistrictCode) {
          this.$message.error('请选择区县!')
          return
        }
        this.$refs.enterpriseConfig.validate((valid) => {
          if (!valid) {
            return false
          }
          saveEnterpriseConfig(this.enterpriseConfig).then(response => {
            if (response.isError) return
            this.$message({
              type: 'success',
              message: '保存成功!'
            })
          })
        })
      }
    }
  }
</script>

<style lang="less" scoped>

  .el-input{
    width: 20%;
  }
  .estimate-radio{
    color: #fff;
    width: 22px;
    overflow: hidden;
  }
  .estimate-item{
    width: 265px;
    margin-bottom: 0;
    .el-input-default{
      width: 163px!important;
    }
  }
  .estimate-bar{
    padding-bottom: 60px;
  }
  .estimate-input{
    position: relative;
  }
  .font-tips{
    padding-left: 100px;
    position: absolute;
    left: 0;
    bottom: -36px;
  }
  .font-x{
    width: 35px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .main-transfer {
    width: 200px;
  }

  .main-transfer-title {
    background-color: #f5f7fa;
    height: 40px;
    font-size: 16px;
    padding-left: 20px;
  }

  .main-transfer-list {
    height: 260px;
    overflow-y: scroll;
  }

  // 任务新增，基本信息样式调整
  .input-bar-0{
    width: 35%!important;
  }
  .input-bar-1{
    width: 40%;
    margin-bottom: 5px!important;
  }
  .input-bar-2{
    width: 60%;
    margin-bottom: 5px!important;
  }
  .input-bar-3{
    width: 100%;
    margin-bottom: 5px!important;
  }
  .input-bar-4{
    width: 35%!important;
  }
  .width-input-1{
    width: 100%!important;
  }
  .width-input-2{
    width: 35%!important;
  }
  .width-input-3{
    width: 30%!important;
  }
  .width-date{
    width: 200px!important;
  }
  .gray-bar{
    background: #f2f2f2;
    padding: 5px 0 0 0;
    margin-bottom: 20px;
  }
  .gray-active{
    margin-right:20px;
    padding: 15px 13px;
    &.active{
      background: #f2f2f2;
    }
  }
  .radio-top-bar{
    margin-bottom: -22px;
  }
  .noraml-height{
    height: 40px;
  }
  .bgc-default{
    padding-bottom: 150px;
    h2{
      font-size: 20px;
      color: #666;
      line-height: 1;
      margin: 0 0 20px;
      font-weight: unset;
    }
  }
  .save-btn{
    width: 100px;
    height: 40px;
    line-height: 40px;
    padding: unset;
    text-align: center;
  }
.bottom-bar{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 110px;
  position: fixed;
  left: 0;
  bottom: 0;
  width: calc(100% - 20px);
  box-shadow: 0 -2px 12px #eee;
  background-color: white;
  .el-button{
    width: 100px;
    height: 40px;
    line-height: 40px;
    padding: unset;
    text-align: center;
  }
} 
</style>
